'use strict';

import { MyEditor } from "../common/Editor";
// import Upload from "../common/upload";
import { useRouter } from 'next/router';
import axios from 'axios';
import React, { useState, useEffect, useCallback } from 'react'
import UploadImage from '../common/UploadFile';
import { toast } from "react-toastify";
// import Editor from '../common/htmlEdior';


 export function CreaetNews () {

    const [content, setContent] = useState('')
    const [title, setTitle] = useState('')
    const [url, setUrl] = useState('')
    const [author, setAuthor] = useState('')

    const router = useRouter();
    const { id } = router.query;

    const buildCkEditor = () => {
        return (
          <div className="release-ckeditor w-full overflow-visible text-black">
            <MyEditor initContent={content} getContent={(data)=>getContent(data)}/>
          </div>
        )
      }

    useEffect(() => {   
        if (id) {
            axios.post('/api/news/detail', { id }).then((res) => {
                const {title, url, author, html} = res.data.data;
                setTitle(title)
                setUrl(url)
                setAuthor(author)
                setContent(html)
            })
        }
    }, [id])


    const getContent = useCallback((data) => {
        setContent(data)
    }, []) 


    const onUpload = useCallback(async (file) => {
        const formData = new FormData();
        formData.append("file", file);
        const res = await axios.post('/api/upload', formData)
        if (res.data.error == 0) {
            toast.success("缩略图上传成功")
            setUrl(res.data.data.url)
        } else {
            toast.error("缩略图上传失败")
        }
    }, [])

    const submitNews = async () => {
        // Submit news
        const data = {
            id: id? id: null,
            html: content,
            title,
            author,
            url         
        }
        let response = await axios.post(id ? '/api/news/edit':'/api/news/add', data)
        if (response.data.code == 200) {
            toast.success(id? "编辑成功":"发布成功")
            router.push('/account/saved-websites')
        } else {
            toast.error(id ? "编辑失败":"发布失败")

        }
    }

    return (
        <>
            <div className="item-center">
                <h1 className="text-center text-2xl font-bold mb-5">{id ? '编辑新闻' : '创建新闻'}</h1>
                <div className="divider"></div>
                <div className="mt-5 mb-5">
                    标题 ：<input type="text" defaultValue={title} onChange={(v) => {setTitle(v.target.value)}} placeholder="请输入标题" className="input input-bordered w-full max-w-xs" />
                </div>
                <div className="mt-5 mb-5">
                    作者 ：<input type="text" defaultValue={author} onChange={(v) => {setAuthor(v.target.value)}} placeholder="请输入作者" className="input input-bordered w-full max-w-xs" />
                </div>
                <div className="mt-5 mb-5">
                    缩略图：<UploadImage onUpload={onUpload} initImage={url}/>
                </div>
                <div className="mt-5 mb-5">
                    正文 ：{buildCkEditor()}
                </div>
                <button className="text-right btn btn-primary mt-5" onClick={submitNews}> 确认发布</button>
            </div>
        </>
    );
}

// export default CreaetNews;
